<template>
  <div class="tb-container">
    <el-card class="box-card">
      <div class="left-main">
        <div style="padding-top: 50px">
          <div class="avatar">
            <el-avatar :src="UserFilled" />
          </div>
        </div>
        <div class="info name">
          用户姓名：{{ store.getters.userInfo.nickName }}
        </div>
        <div class="info Gender">
          性&emsp;&emsp;别：{{ store.getters.userInfo.gender }}
        </div>
        <div class="info user">
          所属角色：{{ store.getters.userInfo.roleName }}
        </div>
        <div class="info account">
          账户名称：{{ store.getters.userInfo.name }}
        </div>
      </div>
      <div class="right-main">
        <el-form
          ref="formRef"
          :model="formInline"
          style="position: relative"
          :rules="rules"
        >
          <el-form-item
            label="旧密码"
            prop="oldPassword"
            style="margin-left: 13px"
          >
            <el-input
              type="password"
              v-model="formInline.oldPassword"
              placeholder="请输入旧密码"
            />
          </el-form-item>
          <el-form-item
            label="新密码"
            prop="newPassword"
            style="margin-left: 13px"
          >
            <el-input
              type="password"
              v-model="formInline.newPassword"
              placeholder="请输入新密码"
            />
          </el-form-item>
          <el-form-item label="重复密码" prop="newPasswordS">
            <el-input
              type="password"
              v-model="formInline.newPasswordS"
              placeholder="请输入重复密码"
            />
          </el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, defineEmits, defineProps } from 'vue'
import { ElMessage } from 'element-plus'
import { ChangePassword, logout as logoutapi } from '@/api/sys'
import { JSEncrypt } from 'jsencrypt'
import { PUBLIC_KEY } from '@/constant'
import store from '@/store'
const UserFilled = ref(
  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
)
const formRef = ref(null)
const formInline = reactive({
  newPassword: '',
  oldPassword: '',
  newPasswordS: '',
  id: store.getters.userInfo.id
})
let validPassword = (rule, value, callback) => {
  let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
  if (!reg.test(value)) {
    callback(new Error('密码必须是由6-20位字母+数字组合'))
  } else {
    callback()
  }
}
let validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
    // password 是表单上绑定的字段
  } else if (value !== formInline.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}
const rules = reactive({
  oldPassword: [
    {
      required: true,
      message: '请输入旧密码',
      trigger: 'blur'
    }
  ],
  newPassword: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur'
    },
    { validator: validPassword, trigger: 'blur' }
  ],
  newPasswordS: [
    {
      required: true,
      message: '请输入重复密码',
      trigger: 'blur'
    },
    { validator: validatePass2, trigger: 'blur' }
  ]
})
const onSubmit = () => {
  formRef.value.validate((val) => {
    if (val) {
      save(formInline)
    } else {
      console.log('提交失败')
      return false
    }
  })
}
const save = async (data) => {
  var encrypt = new JSEncrypt()
  encrypt.setPublicKey(PUBLIC_KEY)
  const newPassword = encrypt.encrypt(data.newPassword)
  const oldPassword = encrypt.encrypt(data.oldPassword)
  await ChangePassword({
    oldPassword: oldPassword,
    newPassword: newPassword,
    id: store.getters.userInfo.id
  })
  ElMessage({
    showClose: true,
    message: '修改成功，请重新登录!'
  })
  store.dispatch('user/logout')
}
const cancel = () => {
  formInline.newPassword = ''
  formInline.oldPassword = ''
  formInline.newPasswordS = ''
}
</script>

<style lang="scss" scoped>
.tb-container {
  height: 100%;
  :deep(.el-card__body) {
    padding: 0;
  }
  .box-card {
    position: relative;
    height: 100%;
    .left-main {
      width: 250px;
      height: 100%;
      font-size: 16px;
      border-right: 1px solid #aaaaaa;
      .avatar {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        :deep(.el-avatar) {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
      }
      .name {
        margin-top: 15px;
        border-top: 1px solid #aaaaaa;
        border-bottom: 1px solid #aaaaaa;
      }
      .Gender,
      .user,
      .account {
        border-bottom: 1px solid #aaaaaa;
        border-bottom: 1px solid #aaaaaa;
      }
    }
    .right-main {
      position: absolute;
      top: 25%;
      left: 20%;
      width: 800px;
      height: 400px;
      .btn {
        text-align: center;
      }
    }
  }
}
</style>
